---
title: Stars Background
description: An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-backgrounds-stars" />

## Installation

<ComponentInstallation name="components-backgrounds-stars" />

## Usage

```tsx
<StarsBackground />
```

## API Reference

### StarsBackground

<TypeTable
  type={{
    factor: {
      description: 'The factor of the stars.',
      type: 'number',
      required: false,
      default: '0.05',
    },
    speed: {
      description: 'The speed of the stars.',
      type: 'number',
      required: false,
      default: '50',
    },
    transition: {
      description: 'The transition of the stars.',
      type: 'SpringOptions',
      required: false,
      default: '{ stiffness: 50, damping: 20 }',
    },
    starColor: {
      description: 'The color of the stars.',
      type: 'string',
      required: false,
      default: '#fff',
    },
    pointerEvents: {
      description: 'Whether the stars should have pointer events.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    '...props': {
      description: 'The props of the StarsBackground.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- Credits to [umangladani](https://codepen.io/umangladani/pen/wvgwgjK) for the inspiration
